import React, {Component} from "react"
import {View,Text,StyleSheet,TouchableHighlight} from "react-native";
import {connect} from "react-redux";
/**
 * @Author Training
 * @Desc 卡片组件
 */
interface IRight{
    src?:string,   // 卡片头部右侧点击跳转
    text?:any  // 卡片头部右侧显示文字
}
interface IProps{
    Icon?:any       // 左侧图标
    title?:string   // 左侧标题文字
    right?:IRight | any  // 右侧显示
    color?:string       // 文字颜色
    navigation?:any
    children?:any
}
class Card extends Component<IProps>{
    static defaultProps = {
        right:{},
        color:"#313134"
    }
    constructor(props: IProps | Readonly<IProps>){
        super(props);

    }
    private onJump = ()=>{
        this.props.navigation.navigate(this.props.right.src);
    };
    render():any{

        return (<View style={styles.card}>
            <View style={styles.cardHeader}>
                <View style={styles.cardHeaderTitle}>
                    {this.props.Icon}
                    <Text style={{color:this.props.color,fontWeight:"bold",marginLeft:7}}>{this.props.title}</Text>
                </View>
                <TouchableHighlight style={styles.cardHeaderRight} onPress={this.onJump}>
                    <Text style={{fontSize:14}}>{this.props.right.text}</Text>
                </TouchableHighlight>
            </View>
            <View>
                {this.props.children}
            </View>
        </View>);
    }
}

const styles = StyleSheet.create({
    card:{
        padding:15
    },
    cardHeader:{
        // paddingTop:10
        flexDirection:"row",
        justifyContent:"space-between",
        height:26
    },
    cardHeaderTitle:{
        flexDirection:"row",
        justifyContent:"flex-start",
        alignItems:"center"
    },
    cardHeaderRight:{

    }
})
const mapStateToProps = (state:any) => {
    console.log(state);
    return ({})
}
const mapDispatchToProps = (dispatch:any) => ({

});
export default connect(mapStateToProps,mapDispatchToProps)(Card)
